<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	body {
		margin: 0;
	}
	.wrap {
		width: 800px;
		height: 500px;
		margin: 100px auto;
		background: url('./images/0.jpg');
		position:relative;
		perspective:800px;
	}
	.right{
		width:50%;
		height:100%;
		position:absolute;
		right:0;
		top:0;
		transform-origin:left;
		transform-style:preserve-3d;
		transform:rotateY(0deg);
	}
	.front, .back{
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		backface-visibility:hidden;
	}
	.front{
		background:url('./images/0.jpg')no-repeat right top;
		transform:rotate(0deg);
	}
	.back {
		background:url('./images/1.jpg')no-repeat left top;
		transform:rotateY(180deg);
	}
	.other{
		width:50%;
		height:100%;
		position:absolute;
		right:0;
		top:0;
		background:url('./images/1.jpg')no-repeat right top;
		z-index:-1;
	}
	.on{
		transform:rotateY(-180deg);
		transition:all 1.5s;
	}
  </style>
 </head>
 <body>
	<div class="wrap">
		<div class="right">
			<div class="front"></div>
			<div class="back"></div>
		</div>
		<div class="other"></div>
	</div>
	<script type="text/javascript">
	(function() {
		var oWrap = document.querySelector('.wrap');
		var oRight = document.querySelector('.right');
		var oOther = document.querySelector('.other');
		var oFront = document.querySelector('.front');
		var oBack = document.querySelector('.back');
		var index = 0;
		
		oWrap.onmouseenter = function() {
			oRight.onclick = change;
		}
		
		function change(){
			index++;
			index = index % 5;
			oRight.classList.add('on');
			document.addEventListener('transitionend', function() {
				oRight.classList.remove('on');
				oWrap.style.backgroundImage = oFront.style.backgroundImage = "url(./images/" + index + ".jpg)";
				oBack.style.backgroundImage = oOther.style.backgroundImage = "url(./images/" + (index + 1) % 5+ ".jpg)"
			});
		}
	})()
	</script>
 </body>
</html>
